<template>
  <cj-popup v-model="showSpecifications" position="bottom" round :close-on-click-overlay="true" @closed="closeModal">
    <article class="c-bg-white c-br-tl20 c-br-tr20 c-pb20 c-ph20 c-minh50vh c-maxh80vh c-flex-column">
      <div class="c-pa c-p-t24 c-p-r24">
        <div class="iconfont c-fc-gray c-fs20" @click="closeModal">&#xeca0;</div>
      </div>
      <section v-if="curSelectShopInfo" class="c-flex-row c-pb28 c-pt24 c-bd-b1">
        <div class="c-ww120 c-hh120 c-text-hidden c-br10">
          <CoverImg :coverSizeClass="'c-w100 c-h c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(curSelectShopInfo.cover, require('@/assets/defult270.png'))" @clickImg="previewPicture"/>
        </div>
        <div class="c-pl16 c-fs24 c-flex-grow1 c-w0">
          <div class="c-flex-row c-aligni-center">
            <span class="c-fs24 c-fc-xmlred c-fw-b">{{'￥' | iosPriceFilter}}</span>
            <span class="c-fs36 c-fc-xmlred c-fw-b">
              {{getDescPrice}}
            </span>
            <div
              v-if="showDiscountTig"
              class="c-flex-row c-flex-center coupon-item2 c-bg-xmlred c-ph14 c-hh36 c-lh36 c-fs20 c-fw600 c-ml16 c-flex-shrink0"
            >
              折后价
            </div>
            <div v-if="collagePeopleNum" class="c-flex-row c-ml10 theme-bd1 c-br4 c-text-hidden">
              <div class="iconfont c-hh24 c-ww30 theme-bg c-fs24 c-fc-white c-flex-row c-justify-center c-lh28">&#xe950;</div>
              <div class="c-hh24 c-ph6 c-fs16 theme-fc c-lh28">{{collagePeopleNum}}人拼</div>
            </div>
          </div>
          <div class="c-pt12 c-flex-row c-aligni-center c-fc-gray c-fs20">
            <div v-if="curSelectShopInfo.deposit" class="c-fc-xmlred c-mr24">定金: {{'￥' | iosPriceFilter}}{{curSelectShopInfo.deposit}}</div>
            <span v-show="curSelectShopInfo.originalPrice && (curSelectShopInfo.originalPrice * 1 > curSelectShopInfo.price * 1)" class="c-fs20 c-fc-gray c-pr20 c-text-decoration-through">{{ '￥' | iosPriceFilter }}{{ curSelectShopInfo.originalPrice }}</span>
            <span class="c-flex-grow1 c-w0">库存: {{curSelectShopInfo.stock ? curSelectShopInfo.stock + '件' : '暂无'}}</span>
            <span @click="goShopDetail" v-if="[1, 2].includes(fromType)" class="c-pr10">商品详情</span>
            <i @click="goShopDetail" v-if="[1, 2].includes(fromType)" class="iconfont c-fs12">&#xe635;</i>
          </div>
          <div class="c-flex-row c-aligni-center c-mt16">
            <shop-number
              :max='maxDefaultInputNum'
              :min='minBuyNum'
              :inputNum='defultBuyNum'
              :isLimitBuy='_limitInfo ? _limitInfo.limitType : -1'
              :limitNumber='_limitInfo ? _limitInfo.limitNumber : 0'
              :purchasedNum='_limitInfo ? _limitInfo.purchasedNum : 0'
              :iconClass="'c-ww44 c-hh44 c-br8 c-bg-f4f5f7'"
              :numberClass="''"
              @outMaxNum='outMaxNum'
              @subNum='subNum'
              @addNum='addNum'
              @inputChange='inputChange'
            ></shop-number>
            <div class="c-flex-row c-aligni-center c-fc-gray c-fs20 c-ml20" v-if="minBuyNum > 1 || maxBuyNumText || marketMaxBuyNum">（
              <span v-if="minBuyNum > 1">{{minBuyNum}}件起售{{ maxBuyNumText || marketMaxBuyNum ? '，' : ''}}</span>
              <span v-if="maxBuyNumText">{{maxBuyNumText}}{{ marketMaxBuyNum ? '，' : ''}}</span>
              <span v-if="marketMaxBuyNum">限购{{marketMaxBuyNum}}件</span>）
            </div>
          </div>
        </div>
      </section>

      <section class="c-maxh880 c-minh394 c-contexty-auto" ref="">
        <div class="c-pt28" v-for="(item,index) in specs" :key="index">
          <div class="c-fs26 c-fc-gray c-pb30">{{item.name}}</div>
          <div class="c-flex-row c-flexw-wrap c-fs20 c-pb20">
            <div
              @click="clickChildSpec(index, childIndex)"
              :class="[curSelectSpec.includes(childItem.gsiId) ? 'theme-fc theme-bg-10 theme-bd1':'c-bg-f3 bd1-f3',!childItem.hasStock ? 'c-fc-sgray c-text-decoration-through' : '']"
              class="c-lh24 c-pv14 c-boxSizing-b c-flex-row c-flex-center c-fs22 c-ph18 c-br28 c-mb16 c-mr20 c-bg-f6" v-for="(childItem, childIndex) in specItems" v-show="item.gsId == childItem.gsId" :key="childIndex">
              <span class="c-mww60 c-textAlign-c">{{childItem.name}}</span>
            </div>
          </div>
        </div>
      </section>
      <footer class="c-pt20 c-flex-row">
        <div v-show="bottomBuyType == 'BARGAINSPEC'" class="c-flex-grow1 c-w0 c-flex-row c-flex-center theme-fc c-fs24 theme-bg-10 c-ww180 c-hh64 c-br-tl40 c-br-bl40" @click="clickBuyNow('fromBargain')">立即购买</div>
        <div v-show="bottomBuyType == 'BARGAINSPEC' && bargain" v-if="bargain" class="c-flex-grow1 c-w0 c-flex-row c-flex-center c-fc-white c-fs24 c-ww180 c-hh64 c-br-br40 c-br-tr40" :class="bargain && bargain.status == 1 && bargain.isPreheat == 1 ? 'c-bg-ccc' : 'theme-bg'" @click="clickBargainBuy">
          <span v-if="bargain.userType == 1">正在砍价</span>
          <span v-else>立即砍价</span>
        </div>
        <div v-show="bottomBuyType == 'SPEC'" class="c-flex-grow1 c-w0 c-flex-row c-flex-center theme-fc c-fs24 theme-bg-10 c-ww180 c-hh64 c-br-tl40 c-br-bl40" @click="clickJoinCart">加入购物车</div>
        <div v-show="bottomBuyType == 'SPEC' && !_isInCollage" class="c-flex-grow1 c-w0 c-flex-row c-flex-center c-fc-white c-fs24 theme-bg c-ww180 c-hh64 c-br-br40 c-br-tr40" @click="clickDialogBuy">立即购买</div>
        <div v-show="bottomBuyType == 'SPEC' && _isInCollage" class="c-flex-grow1 c-w0 c-flex-row c-flex-center c-fc-white c-fs24 theme-bg c-ww180 c-hh64 c-br-br40 c-br-tr40" @click="clickDialogBuy">发起拼团</div>
        <div v-show="bottomBuyType != 'SPEC' && bottomBuyType != 'BARGAINSPEC'" class="c-fs24 c-fc-white c-br36 c-lh34 c-pv16 theme-bg c-textAlign-c c-w100" @click="clickConfirm">确定</div>
      </footer>
    </article>
  </cj-popup>
</template>

<script>
import ShopNumber from "@/components/templates/shopNumber.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "../../../utils/common";
let isChangeSelectType = false;
export default {
  components: {
    ShopNumber,
    CoverImg
  },
  props: {
  },
  data() {
    return {
      specs:[],
      specItems:[],
      curSelectSpec:[],
      collagePeopleNum:0,
      marketMaxBuyNum:0,
      minBuyNum:0,
      maxDefaultInputNum:0,
      maxBuyNumText:'',
      curSelectShopInfo: null,
      defultBuyNum: 1,
      selectShopNum: 1,
      showModal: false,
      bottomBuyType:'BUY',
      fromType: 0, //来自 0 商城 1 直播 2 购物车
      showSpecifications: false, // 判断是否显示规格弹窗
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
    };
  },
  computed: {
    getDescPrice() {
      // 预售判断
      if (this.presale) return Number(this.curSelectShopInfo.price).toFixed(2);
      // 砍价判断
      if (this.bargain) return this.bargain.reservePrice;
      // 拼团判断
      if (this._isInCollage) return Number(this.curSelectShopInfo.price).toFixed(2);
      // 链动最低价格
      if (this.isChainBonus && this.curSelectShopInfo.optimal && [10, 20, 99].includes(this.curSelectShopInfo.optimal.optimalPriceType)) {
        Number(this.orderBonus).toFixed(2);
      }
      // 其他情况比价
      let discountPrice = this.vipDiscountType == 1 ? Number((this.currentDiscount * 1 / 100) * this.curSelectShopInfo.price).toFixed(2) : Number(this.currentDiscount).toFixed(2);
      if (this.curSelectShopInfo.optimal && [102, 112].includes(this.curSelectShopInfo.optimal.optimalPriceType) && !this._isInCollage && !this.bargain) {
        return this.isChainBonus && this.orderBonus <= discountPrice ? this.orderBonus : discountPrice;
      }
      return this.curSelectShopInfo.optimal ? this.curSelectShopInfo.optimal.optimalPrice : discountPrice;
    },
    showDiscountTig() {
      return this.hasDiscount && !(this.bargain || this._isInCollage || this.curSelectShopInfo.deposit);
    }
  },
  beforeRouteLeave(to, from, next) {
    if (document.querySelector('#picturePreview')) {
      next(false);
      this.$picturePreview.hide();
    } else {
      next(true);
    }
  },
  activated() {
    isChangeSelectType = false;
  },
  methods: {
    public_initSpecInfo(info) {
      this._specItemInfos = info.specItemInfos; //所有规格信息列表
      this._defaultMaxNum = info.maxDefaultInputNum; //默认最大购买数量
      this._isInCollage = info.isInCollage; //是否正在拼团
      this._isInFlashSales = info.isInFlashSales; //是否正在限时购
      this._defaultCover = info.defaultCover; //默认封面
      this._defaultPrice = info.defaultPrice; //默认产品价格
      this._collagePrice = info.collagePrice; //拼团价格
      this._isCollagePlayer = info.isCollagePlayer;//是否拼团成员
      this._falshSalesPrice = info.falshSalesPrice; //限时购价格
      this._defaultOriginalPrice = info.defaultOriginalPrice; //默认原价
      this._defaultStock = info.defaultStock; //默认库存
      this._limitInfo = info.limitInfo || null; // 限购信息
      this._defaultDeposit = info.currentSpecDeposit; // 预售活动定金
      this.bargainType = info.bargainType; // 砍价区分购买方式
      this.bargain = info.bargain || null; // 判断是否有砍价信息
      this.curSelectSpec = info.selectSpec; //当前选中规格数组[111,222]
      this.collagePeopleNum = info.collagePeopleNum;//拼团人数
      this.marketMaxBuyNum = info.marketMaxBuyNum; //营销（拼团、限时购）限购数量
      this.minBuyNum = info.minBuyNum; //最少购买数量
      this.maxBuyNumText = info.maxBuyNumText; //最大购买数量文案
      this.specs = info.specs; //一级规格列表
      this.defultBuyNum = this.minBuyNum; //默认输入数量
      this.selectShopNum = this.minBuyNum; //当前选择商品数量
      this.specItems = this.resetSpecList(info.specItems); //二级规格列表
      this.bottomBuyType = info.bottomBuyType || 'BUY'; //当前购买类型 BUY 购买 CAR 购物车 SPEC 规格
      this.fromType = info.fromType || 0;
      this.presale = info.presale || null; // 商城预售
      this.showPriceBar = info.showPriceBar || false; // 判断是否展示代理商身份价格展示
      this.vipType = info.vipType;
      this.vipDiscountType = info.vipDiscountType;
      this.showModal = true;
      this.isMarketing = info.isMarketing; // 是否处于营销活动
      this.showSpecifications = true; // 判读是否显示规格弹窗
      this.isClickToDetail = info.isClickToDetail; // 是否点击封面图可以跳转到商品详情
      this.optimal = info.optimal; // 最低价格对象
      this.mgId = info.mgId; // 商品id
      let {vipDiscount, svipDiscount, commonProdInfo, chainInfo} = info;
      // 链动判断
      let isChainBonus = chainInfo && (
                          (chainInfo.enableOrderDiscount == 1 && chainInfo.orderBonus * 1 != this._defaultPrice * 1) ||
                          (chainInfo.isReorder && chainInfo.enableReorderDiscount == 1 && chainInfo.reorderBonus * 1 != this._defaultPrice * 1)
                        ) ? true : false;
      if (!(this.presale || this._isInFlashSales || this._isInCollage || this.bargain) && isChainBonus ) {
        // 是否符合链动优惠活动
        this.isChainBonus = isChainBonus;
        // 链动优惠价格
        this.orderBonus = chainInfo.enableReorderDiscount == 1 && chainInfo.isReorder && chainInfo.reorderBonus * 1 > 0 ?
                          chainInfo.reorderBonus * 1 : chainInfo.enableOrderDiscount == 1 && chainInfo.orderBonus * 1 > 0 ? chainInfo.orderBonus * 1 : this._defaultPrice;
      }
      // 判断是否存在身份折扣 || 链动折扣
      this.currentDiscount = this.vipDiscountType == 1 ? 100 : this._defaultPrice;
      if (this.vipType != 1 || isChainBonus) {
        let currentDiscount = this.vipType == 2 ? vipDiscount * 1 :
                                 this.vipType == 4 ? svipDiscount * 1 :
                                 this.vipType == 3 || this.vipType > 4 && commonProdInfo ? commonProdInfo.agentDiscount * 1 :
                                 this.vipDiscountType == 1 ? 100 : this._defaultPrice * 1;
        let hasVipDiscount = (this.vipType == 2 && ((this.vipDiscountType == 1 && vipDiscount < 100) || (this.vipDiscountType == 2 && vipDiscount != this._defaultPrice))) ||
        (this.vipType == 4 && ((this.vipDiscountType == 1 && svipDiscount < 100) || (this.vipDiscountType == 2 && svipDiscount != this._defaultPrice))) ||
        ((this.vipType == 3 || this.vipType > 4) && ((this.vipDiscountType == 1 && commonProdInfo.agentDiscount < 100) || (this.vipDiscountType == 2 && commonProdInfo.agentDiscount != this._defaultPrice)))
        // 获取身份折扣
        if (hasVipDiscount) {
          this.currentDiscount = currentDiscount;
        }
        this.currentDiscount = this.currentDiscount || (this.vipDiscountType == 1 ? 100 : this.curSelectShopInfo.price);
        // 判断是否存在链动或者身份折扣
        this.hasDiscount = this.isChainBonus || hasVipDiscount;
      }
      this.initSelectShopInfo();
    },
    resetSpecList(oldList) {
      if (!this._specItemInfos.length) {
        return [];
      }
      let firstSpec = this.curSelectSpec[0];
      let secondSpec = this.curSelectSpec[1];
      for (let item of oldList) {
        item.index = this.specs.findIndex(i => i.gsId == item.gsId); // 判断规格级别
        let hasStock = this._specItemInfos.some(i => i.itemGroup.includes(item.gsiId) && i.stock > 0); // 默认查询这个对应规格是否存在没库存的情况
        if (item.index == 2) { // 三级规格遍历到第三层去找是否存在库存
          let groupId = `[${firstSpec},${secondSpec},${item.gsiId}]`;
          let curSelectItem = this._specItemInfos.find(i => i.itemGroup == groupId);
          hasStock = curSelectItem ? curSelectItem.stock > 0 : hasStock;
        } else if (item.index == 1) { // 二级规格遍历到第二层去找是否存在库存
          let groupId = [firstSpec, item.gsiId];
          hasStock = this._specItemInfos.some(i => groupId.every(e => JSON.parse(i.itemGroup).includes(e)) && i.stock > 0);
        }
        item.hasStock = hasStock;
      }
      return oldList;
    },
    // 获取商品对应规格的最优价格
    getSpecOptimalPrice(gsiiId) {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(
        `${global.apiurl}goods/getSpecOptimalPrice?mgId=${ this.mgId}&gsiiId=${gsiiId}`,
        res => {
          resolve(res.optimal)
        })
      })
    },
    async initSelectShopInfo() {
      let optimal = this.optimal;
      let marketingPrice = this._isInFlashSales && optimal && optimal.optimalPriceType == 101 ? this._falshSalesPrice : this._isInCollage ? this._collagePrice : 0;
      let marketingOriginalPrice = (this._isInFlashSales && optimal && optimal.optimalPriceType == 101) || this._isInCollage ? this._defaultPrice : 0;
      const info = {
        cover: this._defaultCover,
        price: marketingPrice || this._defaultPrice,
        originalPrice: marketingOriginalPrice || this._defaultOriginalPrice,
        stock: this._defaultStock,
        deposit: this._defaultDeposit,
        optimal: optimal
      };
      // 没有规格的时候
      if (!this._specItemInfos.length) {
        this.curSelectShopInfo = info;
        this.maxDefaultInputNum = this._defaultMaxNum || this._defaultStock;
        return;
      }
      // 有规格的时候
      const selectGroup = `[${this.curSelectSpec}]`;
      const selectItem = this._specItemInfos.find(i => i.itemGroup == selectGroup);
      if (!selectItem) {
        this.curSelectShopInfo = info;
        return;
      }
      if (selectItem && !selectItem.optimal) {
        selectItem.optimal = await this.getSpecOptimalPrice(selectItem.gsiiId);
        this.optimal = selectItem.optimal;
        this._specItemInfos.forEach(item => {
          if (item.gsiiId == selectItem.gsiiId) {
            item.optimal = selectItem.optimal
          }
        })
      }
      optimal = selectItem.optimal;
      const collagePlayerPrice = this._isCollagePlayer ? selectItem.captainPrice : selectItem.captainPrice;
      marketingPrice = this._isInFlashSales && optimal && optimal.optimalPriceType == 101 ? selectItem.flashPrice : this._isInCollage ? collagePlayerPrice : 0;
      marketingOriginalPrice = (this._isInFlashSales && optimal && optimal.optimalPriceType == 101) || this._isInCollage ? selectItem.price : 0;
      const newInfo = {
        cover: selectItem.gsiPicture || info.cover,
        price: marketingPrice || selectItem.price,
        originalPrice: marketingOriginalPrice || selectItem.originalPrice,
        stock: selectItem.stock,
        deposit: selectItem.deposit,
        optimal: optimal
      };
      this.maxDefaultInputNum = this._defaultMaxNum || newInfo.stock;
      this.curSelectShopInfo = newInfo;
      isChangeSelectType = true;
      // 预售限购的话要根据规格还有已购买数量判断数量选择器的最大数值
      this.maxDefaultInputNum = this.presale && this.presale.limit > 0 ? ((this.presale.limit - this.presale.buyCount) > this.curSelectShopInfo.stock ? this.curSelectShopInfo.stock : (this.presale.limit - this.presale.buyCount)) : this.maxDefaultInputNum;
      console.log('stock: ' + this.curSelectShopInfo.stock);
      console.log('maxNum: ' + this.maxDefaultInputNum);
    },
    clickChildSpec(index, childIndex) {
      let childItem = this.specItems[childIndex];
      if (!childItem.hasStock) {
        return;
      }
      //切换的规格是一二级
      if (index == 0 || index == 1) {
        let firstSpec = '';
        let secondSpec = '';
        //切换一级规格
        if (index == 0) {
          firstSpec = childItem.gsiId;
          secondSpec = this.curSelectSpec[1];
        } else { //切换二级规格
          firstSpec = this.curSelectSpec[0];
          secondSpec = childItem.gsiId;
        }
        let thirdSpec = this.curSelectSpec.length > 2 ? this.curSelectSpec[2] : '';
        let newSelectSpecStr = thirdSpec ? `[${firstSpec},${secondSpec},${thirdSpec}]` : `[${firstSpec},${secondSpec}]`;
        //判断选中的一二规格是否有库存
        let hasStock = this._specItemInfos.find(i => i.itemGroup == newSelectSpecStr && i.stock > 0);
        if (hasStock) {
        //有库存，则选中当前规格
          this.curSelectSpec = JSON.parse(newSelectSpecStr);
        } else {
          //没库存，则选中最近一个有库存的规格
          let curSpec = index == 0 ? firstSpec : secondSpec;
          let hasStockItem = this._specItemInfos.find(i => i.itemGroup.includes(curSpec) && i.stock > 0);
          this.curSelectSpec = hasStockItem ? JSON.parse(hasStockItem.itemGroup) : [];
        }
        //重置选中后的数据
        this.specItems = this.resetSpecList(this.specItems);
        this.initSelectShopInfo();
        return;
      }
      // 切换最后一层规格
      let firstSpec = this.curSelectSpec[0];
      let secondSpec = this.curSelectSpec[1];
      let thirdSpec = this.curSelectSpec.length > 2 ? this.specItems[childIndex].gsiId : '';
      this.curSelectSpec = thirdSpec ? [firstSpec, secondSpec, thirdSpec] : [firstSpec, secondSpec];
      //重置选中后的数据
      this.specItems = this.resetSpecList(this.specItems);
      this.initSelectShopInfo();
    },
    //数量增加
    addNum(item) {
      this.selectShopNum = item.inputNumber;
    },
    //数量减少
    subNum(item) {
      this.selectShopNum = item.inputNumber;
    },
    //输入数量
    inputChange(item) {
      this.selectShopNum = item.inputNumber;
    },
    // 超出商品可购买的最大限额
    outMaxNum(limitNumber, purchasedNum, inputNumber) {
      if (limitNumber <= purchasedNum) {
        this.$showCjToast({
          text: '您已购买过该商品，当前不能购买更多了',
          type: "warn",
          time: 1500
        });
      } else if (limitNumber <= (purchasedNum + inputNumber)) {
        this.$showCjToast({
          text: '当前不能购买更多了',
          type: "warn",
          time: 1500
        });
      }
    },
    clickBuyNow(info) {
      this.$emit('clickBuyNow', info);
    },
    clickBargainBuy() {
      let info = {
        selectSpec: this.curSelectSpec,
        selectShopNum: this.selectShopNum,
        isChangeSelectType
      }
      this.$emit('clickBargainBuy', info);
    },
    clickDialogBuy() {
      let info = {
        selectSpec: this.curSelectSpec,
        selectShopNum: this.selectShopNum,
        isChangeSelectType
      }
      this.$emit('dialogBuy', info);
    },
    clickJoinCart() {
      let info = {
        type: 'CAR',
        selectSpec: this.curSelectSpec,
        shopInfo: this.curSelectShopInfo,
        selectShopNum: this.selectShopNum,
        isFromCollage: false,
        isChangeSelectType
      }
      this.$emit('joinCart', info);
    },
    clickBuy() {
      // this.curSelectShopInfo.price = this._defaultPrice;
      let info = {
        type: 'BUY',
        selectSpec: this.curSelectSpec,
        shopInfo: this.curSelectShopInfo,
        selectShopNum: this.selectShopNum,
        isChangeSelectType,
        bargainType: this.bargainType
      }
      this.$emit('confirmSpec', info);
    },
    clickConfirm() {
      if (this.bottomBuyType == 'BUY') {
        this.clickBuy();
        return;
      }
      if (this.bottomBuyType == 'CAR') {
        this.clickJoinCart();
        return;
      }
    },
    closeModal() {
      let info = {
        selectSpec: this.curSelectSpec,
        selectShopNum: this.selectShopNum,
        isChangeSelectType
      }
      this.showSpecifications = false;
      this.$emit('closeSpec', info)
    },
    // 预览规格图
    previewPicture() {
      let that = this;
      let hasSpecPic = false;
      if (that.specItems.every(item => item.gsiPicture == '')) {
        hasSpecPic = true;
      }
      let imgArr = [];
      let txtArr = [];
      // 单规格缩略图预览
      if ((that.specItems && that.specItems.length == 0) || hasSpecPic) {
        let img = that._defaultCover;
        imgArr.push(img)
        that.$picturePreview({
          imgUrlArr: imgArr, // 图片数组
          isShowNumber: false, // 展示索引
          activeIndex: 0, // 目前展示索引
          title: [], // 文字数组
          isShowTitle: false, // 是否展示文字
        });
      } else {
        // 多规格缩略图预览
        let firstSpecArray = that.specItems.filter(item => (item.gsId == that.specItems[0].gsId) && item.hasStock); // 过滤出一级规格的规格图数组
        firstSpecArray.forEach(item => {
          if (!item.gsiPicture) {
            item.gsiPicture = that._defaultCover
          }
        })
        let activeIndex = firstSpecArray.indexOf(firstSpecArray.filter(item => {
          return that.curSelectSpec[0] == item.gsiId;
        })[0]);
        firstSpecArray.forEach(item => {
          imgArr.push(item.gsiPicture);
          txtArr.push(item.name);
        })
        that.$picturePreview({
          imgUrlArr: imgArr, // 图片数组
          isShowNumber: true, // 展示索引
          activeIndex: activeIndex, // 目前展示索引
          title: txtArr, // 文字数组
          isShowTitle: true, // 是否展示文字
          slideChange: (index) => { // 滑动切换
            let childIndex = that.specItems.findIndex(item => item.gsiId == firstSpecArray[index].gsiId); // 找到要滑动的下张图片在规格列表中的索引 无找到符合条件的索引返回-1
            that.clickChildSpec(0, (childIndex < 0 ? 0 : childIndex));
          }
        });
      }
    },
    goShopDetail() {
      this.$emit('goShopDetail')
    },
  },
};
</script>
<style scoped lang="scss">
.c-marginauto {
  margin: auto;
}
.theme-live-room {
  .c-bg-f6 {
    background: var(--live-theme-bgcolorf6);
  }
}
.coupon-item2 {
  border-radius: 0.6rem;
  position: relative;
  border: none;
  color: #fff;
}
.coupon-item2:after {
  content: "";
  width: 0.5rem;
  height: 0.2rem;
  position: absolute;
  background-image: url('../../../assets/filletedCorner2.png');
  background-position: center bottom;
  background-size: 100%;
  background-repeat: no-repeat;
  bottom: 0;
  left: -0.05rem;
}
.bd1-f3 {
  border: 1px solid #f3f3f3;
}
</style>